
<template>
<div>
  <div id="main">
  天气图表
  </div>
  <div id="main1">
  天气分布
</div>
</div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "cq",
  mounted() {
    var myChart = echarts.init(document.getElementById('main'));
    var myChart1 = echarts.init(document.getElementById('main1'));

    fetch("http://127.0.0.1:5000/getChongqingWeatherEcharts").then((e)=>{
      return e.json()
    }).then((e)=>{
      myChart.setOption({
      title: {
        text: '重庆天气'
      },
      tooltip: {},
      xAxis: {
        data: e[0]
      },
      yAxis: {},
      series: [
        {
          name: '天数',
          type: 'bar',
          data: e[1]
        }
      ]
      });

      fetch("http://127.0.0.1:5000/getChongqingTemperatureEcharts").then((e) => {
        return e.json()
      }).then((e) => {
        myChart1.setOption(
            {
              title: {
                text: '温度',
                subtext: '',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: '天数',
                  type: 'pie',
                  radius: '35%',
                  data: e,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            }
        )
      })

    })

  }
}
</script>
<style scoped>
#main, #main1 {
  width: 100%;
  height: 400px;
}
</style>